<template>
  <div class="the-list">
  
    <div class="panel-search">
      <el-form ref="form" inline>
        <el-form-item>
          <el-input v-model="listQuery.name" placeholder="请输入姓名" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="filter-item" type="primary" icon="icon-search" @click="filterHandle">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="panel-table">
      <div class="table-head">
        <span>用户权限管理</span>
        <div>
          <el-button type="primary" @click="dialogFormVisible = true">添加用户</el-button>
        </div>
      </div>
      
      <el-table v-loading="listLoading" :data="list" border stripe :header-cell-style="{backgroundColor:'#ededed',padding:'12px 0'}">
        <el-table-column label="ID" prop="id" />
        <el-table-column label="姓名" prop="name" />
        <el-table-column label="用户名" prop="account" />
        <el-table-column label="邮箱" prop="email" />
        <el-table-column label="角色权限" prop="role">
          <template #default="{row}">
            <el-tag type="danger" v-if="!row.role">暂未分配权限</el-tag>
            <span v-else>{{row.role}}</span>
          </template>
        </el-table-column>
        <el-table-column label="电话" prop="phone" />
        <el-table-column label="创建时间" prop="createdAt" />
        <el-table-column label="状态">
          <template #default="{row}">
            {{row.status == 1 ? '有效' : '无效'}}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160px">
          <template #default="{row}">
            <el-button type="danger" size="small" @click="deleteUser(row.id)">删除</el-button>
            <el-button type="primary" size="small" @click="distributeRole(row)">分配权限</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-pagination">
        <pagination :total="total" v-model:page="listQuery.page" v-model:limit="listQuery.pageSize" @pagination="getList" />
      </div>
    </div>

    <el-dialog title="添加用户" v-model="dialogFormVisible" width="400px">
      <el-form :model="ruleForm" label-width="50px" :rules="rules" ref="ruleForm">
        <el-form-item label="账号" prop="account">
          <el-input v-model="ruleForm.account"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="ruleForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="email" prop="email">
          <el-input v-model="ruleForm.email"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addUser('ruleForm')">确 定</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog title="分配权限" v-model="showRole" width="400px">
      <el-checkbox-group v-model="checkRoleList">
        <el-checkbox v-for="Role in listRole" :label="Role.id" :key="Role.id">{{Role.name}}</el-checkbox>
      </el-checkbox-group>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showRole = false">取 消</el-button>
          <el-button type="primary" @click="addRoleUser" :loading="loadingRole">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  getEmployeeList,
  addEmployee,
  deleteEmployee,
  editRoleEmployee,
  getPermissionRoleList,
} from "@/api/system";
import Pagination from "@/components/Pagination";
import { ElMessage, ElMessageBox } from "element-plus";
export default {
  name: "systemUser",
  components: {
    Pagination,
  },
  data() {
    return {
      list: [],
      listLoading: true,
      total: 0,
      listQuery: {
        page: 1,
        pageSize: 10,
        name: "",
      },
      dialogFormVisible: false,
      ruleForm: {
        account: "",
        password: "",
        name: "",
        phone: "",
        email: "",
      },
      rules: {
        account: [
          { required: true, message: "账号不能为空", trigger: "change" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "change" },
        ],
        name: [{ required: true, message: "姓名不能为空", trigger: "change" }],
      },
      listRole: [],
      showRole: false,
      checkRoleList: [],
      distributeRoleId: "",
      loadingRole: false,
    };
  },
  created() {
    this.getList();
    this.getRole();
  },
  methods: {
    filterHandle() {
      this.listQuery.page = 1;
      this.listQuery.pageSize = 10;
      this.getList();
    },
    distributeRole(row) {
      this.distributeRoleId = row.id;
      this.showRole = true;
      this.checkRoleList = row.roleIds || [];
    },
    getRole() {
      getPermissionRoleList({
        name: "",
      }).then((res) => {
        if (res.code == 0) {
          this.listRole = res.data.items;
        }
      });
    },
    getList() {
      this.listLoading = true;
      getEmployeeList({
        ...this.listQuery,
      }).then((res) => {
        this.listLoading = false;
        if (res.code == 0) {
          this.list = res.data.items;
          this.total = res.data.pagination.total_record;
        }
      });
    },
    async addRoleUser() {
      this.loadingRole = true;
      const res = await editRoleEmployee({
        id: this.distributeRoleId,
        roleIds: this.checkRoleList,
      });
      if (res.code === 0) {
        ElMessage.success("操作成功");
        this.showRole = false;
        this.getList();
        this.checkRoleList = [];
      }
      setTimeout(() => {
        this.loadingRole = false;
      }, 1000);
    },
    addUser(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addEmployee(this.ruleForm).then((res) => {
            if (res.code === 0) {
              ElMessage({
                message: "添加成功",
                type: "success",
              });
              this.dialogFormVisible = false;
              this.getList();
            }
          });
        }
      });
    },
    deleteUser(id) {
      ElMessageBox.confirm("是否确认删除").then(() => {
        deleteEmployee(id).then((res) => {
          if (res.code === 0) {
            ElMessage({
              message: "删除成功",
              type: "success",
            });
            this.getList();
          }
        });
      });
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/styles/tablePage.scss";
.el-form-item {
  margin-bottom: 8px;
}
</style>
